<template>
<div style="overflow-y: auto;">
  <div id="echarts"></div>
  <echarts2></echarts2>
</div>
</template>

<script>
import echarts2 from '@/view/echarts2'
export default{
  data () {
    return {

    }
  },
  components: {
    echarts2
  },
  mounted () {
    this.myecharts()
  },
  methods: {
    myecharts () {
      // 基于准备好的dom，初始化echarts实例
      var myecharts = this.$echarts.init(document.getElementById('echarts'))
      // 绘制图表
      myecharts.setOption({
        // 标题
        title: {
          text: 'Echarts入门示例'
        },
        // 提示组件
        tooltip: {
          // 触发类型：
          trigger: 'axis',
          axisPointer: {
            type: 'cross' // 提示
          }
        },
        // 工具栏，内置有导出蹄片，数据视图，动态类型切换，数据区域缩放，重置五个小工具
        toolbox: {
          // 动态类型切换，
          feature: {
            magicType: {
              type: ['line', 'bar']
            },
            // 数据工具视图
            dataView: {
              show: true,
              readOnly: false
            },
            // 保存为图片
            saveAsIamge: {
              show: true
            },
            // 配置项还原
            restore: {
              show: true
            }
          }
        },
        // 标记
        legend: {
          data: ['实体查阅', '电子查阅']
        },
        // 配置x轴
        xAxis: {
          // 坐标轴类型
          type: 'category',
          // 配置类目名称，可以逐一设置，具体看稳定
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          // 配置 鼠标移入时
          axisPointer: {
            show: true, // show 必须写，开关作用
            type: 'shadow'
          }
        },
        // 配置y轴
        yAxis: [
          {
            type: 'value', // 坐标抽类型
            name: '实体查阅', // 名称
            min: 0, // 最小值
            max: 100, // 最大值
            interval: 10, // 列数
            axisLabel: {
              formatter: '{value}人' // 字符串模板
            }
          }
        ],
        series: [
          {
            name: '实体查阅',
            type: 'bar',
            data: [15, 26, 89, 23, 45, 78, 59, 63, 13, 12, 79],
            itemStyle: {
              color: '#AFF'
            }
          },
          {
            name: '电子查阅',
            type: 'line',
            data: [45, 78, 56, 45, 25, 89, 54, 23, 45, 78, 56]
          }
        ]
      })
      window.onresize = myecharts.resize()
    }
  }
}
</script>

<style lang="scss">
  #echarts {
    width: 800px;
    height: 500px;
    margin: 25px auto;
  }
</style>
